import {
  Component,
  OnInit,
  ViewChild,
  HostBinding,
  Input
} from "@angular/core";
import { MatPaginator, MatSort, MatTableDataSource } from "@angular/material";
import { MatBottomSheet, MatBottomSheetRef } from "@angular/material";
import { DetailComponent } from "../detail/detail.component";
import { MAT_BOTTOM_SHEET_DATA } from "@angular/material";
import {
  animate,
  state,
  style,
  transition,
  trigger
} from "@angular/animations";
import {
  LocaleService,
  TranslationService,
  Language,
  DefaultLocale
} from "angular-l10n";

interface AssetsItem {
  coin: string;
  ago: number;
  now: number;
  txid: string;
  amount: string;
  status: string;
  address: string;
  id: string;
}

import { Store, select } from "@ngrx/store";
import * as fromAssets from "@/assets/store/reducers/index";
import * as fromRoot from "@/reducers/index";
import { map, filter } from "rxjs/operators";
import { Subscription, combineLatest } from "rxjs";
import { AssetsActions } from "@/assets/store/actions";
import { combineAll, debounceTime } from "rxjs/operators";

import { ActivatedRoute } from "@angular/router";
import { ISelectDepositHistoryRequest } from "@/assets/store/models/assets";

/**
 * @title Table with pagination
 */
@Component({
  selector: "app-deposit-history",
  templateUrl: "./deposit-history.component.html",
  styleUrls: ["./deposit-history.component.scss"],
  animations: [
    trigger("detailExpand", [
      state(
        "collapsed",
        style({ height: "0px", minHeight: "0", display: "none" })
      ),
      state("expanded", style({ height: "*" })),
      transition(
        "expanded <=> collapsed",
        animate("225ms cubic-bezier(0.4, 0.0, 0.2, 1)")
      )
    ])
  ]
})
export class DepositHistoryComponent implements OnInit {
  @Language() lang: string;

  locale = "";

  @Input() search;

  @DefaultLocale() defaultLocale: string;

  displayedColumns: string[] = ["coin", "time", "amount", "status", "action"];

  lists: Array<AssetsItem> = [
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      id: "abc"
    },
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      id: "abc"
    },
    {
      coin: "BTC",
      amount: "0.00002552",
      address: "MHGtdHNwSaQzWaK2N7hxxGmELcZnuRK6fj",
      txid: "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768",
      ago: 1542858853,
      now: 1542860302,
      status: "1",
      id: "abc"
    }
  ];

  assetsItem: AssetsItem;

  dataSource;

  req: ISelectDepositHistoryRequest = {
    coin: "",
    search: ""
  };

  depositHistoryLists$ = this.store
    .pipe(select(fromRoot.depositHistoryLists))
    .pipe(filter(depositHistoryLists => !!depositHistoryLists));

  @HostBinding("style.width")
  public width = "100%";

  @ViewChild(MatSort) sort: MatSort;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  today;
  constructor(
    private bottomSheet: MatBottomSheet,
    public localeIns: LocaleService,
    private store: Store<fromAssets.State | fromRoot.State>,
    private activeRouter: ActivatedRoute
  ) {
    this.locale = this.localeIns.getCurrentLocale();
  }

  ngOnInit() {
    this.addListen();
  }

  addListen() {
    this.localeIns.defaultLocaleChanged.subscribe(() => {
      this.locale = this.localeIns.getCurrentLocale();
    });

    const searchSub$ = combineLatest(
      this.search.valueChanges,
      this.activeRouter.queryParams
    )
      .pipe(debounceTime(500))
      .subscribe(([e, query]: any) => {
        const { coin } = query;
        this.req.coin = coin;
        this.req.search = e;
        this.store.dispatch(
          new AssetsActions.SelectDepositHistory({
            req: {
              search: e,
              coin
            },
            cpt: this
          })
        );
      });

    this.search.setValue("");

    this.depositHistoryLists$.subscribe(depositHistoryLists => {
      this.dataSource = new MatTableDataSource(depositHistoryLists);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
    });
  }

  onDetail() {
    this.bottomSheet.open(DetailComponent, {
      data: {
        lists: [
          {
            label: "dsf",
            content:
              "c59bc457c8ec14ed8aa09a4c27915256c96e19e17eb0299677112665a2cc7768"
          }
        ]
      }
    });
  }
}
